import React from 'react'
import {Table,Tag} from 'antd'
import styles from './historicalalarm.less'
import {connect} from 'react-redux'
import * as actions from '../../request/action'
import {IP} from "../../../../../../utils/request"
import moment from 'moment'
class Index extends React.Component{
    constructor(props){
        super(props)
    }
    componentDidMount(){
        this.props.Gethistoricalalarms(this.props.id)
    }
    click=(record,rowkey)=>{
        this.props.change(record)
    }
    render(){
        let history= []
        if(this.props.historyList.length!=0){
            history =this.props.historyList
            this.props.historyList.map((item,index)=>{
                history[index].warningPhoto =IP + item.warningPhoto
                if(item.isDistribute!=''){
                history[index].isDistribute = item.isDistribute=='1'?'已派警':'不派警'
                }
                if(item.isDistribute==''){
                    history[index].isDistribute='未处理'
                }
                history[index].isManpower = item.isManpower==false?'否':'是'
                history[index].warningTime = moment(item.warningTime).format('YYYY-MM-DD HH:mm')
            })
        }
        const pagination={
            showTotal: () => {
                return `共有${history.length}条数据`
            }
        }
        const columns=[
            {
                title:"告警图片",
                dataIndex:"warningPhoto",
                align:"center",
                className:styles.columns,
                render:(text)=>{
                    return<div> <img src={ text} style={{width:'60px',height:'40px'}}></img></div>
                }
            },
            {
                title:"告警时间",
                dataIndex:"warningTime",
                align:"center",
                className:styles.columns
            },
            {
                title:'告警类型',
                dataIndex:"warningType",
                align:"center",
                className:styles.columns
            },
            {
                title:"告警地点",
                dataIndex:"warningAddress",
                align:"center",
                className:styles.columns
            },
            {
                title:"状态",
                dataIndex:"feedbackStatus",
                align:"center",
                className:styles.columns,
                render: (status) => {
                    switch (status) {
                        case '疑似': return <Tag color="warning">疑似</Tag>
                        case '确认': return <Tag color="success">确认</Tag>
                        case '误报': return <Tag color="error">误报</Tag>
                    }
                }
            },
            {
                title:"人工甄别",
                dataIndex:"isManpower",
                align:"center",
                className:styles.columns
            },
            {
                title:"派警",
                dataIndex:"isDistribute",
                align:"center",
                className:styles.columns
            }
        ]
        return(
            <div className={styles.totall}>
            <Table columns={columns}  pagination={pagination} scroll={{y:500}}  className={styles.table} dataSource={history} onRow={(record,rowkey)=>{
                return{
                    onClick:this.click.bind(this,record,rowkey)
                }
            }}></Table>
            </div>
        )
    }
}
const mapStateToProps=(state)=>({
    historyList:state.Mapcamera.historyList
})
const mapDispatchToProps=(dispatch)=>({
    Gethistoricalalarms(id){
        dispatch(actions.Gethistoricalalarms(id))

}})
export default connect(mapStateToProps,mapDispatchToProps)(Index)